<!--
  Copyright © 2015-2016 Cask Data, Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<my-breadcrumbs></my-breadcrumbs>

<div class="row main-search" ng-if="SearchObjectWithTagsController.loading">
  <h3>
    <span class="fa fa-spin fa-spinner"></span>
    <span>Loading search result</span>
  </h3>
</div>

<div class="row main-search" ng-if="!SearchObjectWithTagsController.loading">
  <div class="col-xs-12">
    <p class="results-count" ng-if="SearchController.filteredTObjects.length">
      <span>{{SearchController.filteredTObjects.length}}</span>
      <ng-pluralize data-count="SearchController.filteredTObjects.length"
                    data-when="{'one': 'result', 'other': 'results'}"></ng-pluralize>
      <span>for "{{SearchObjectWithTagsController.$stateParams.tag}}"</span>
    </p>
    <div ng-repeat="tObject in SearchController.filteredTObjects = (SearchObjectWithTagsController.taggedObjects | filter: SearchObjectWithTagsController.searchTxt ) ">
      <div ng-if="tObject.type === 'application'">
        <div class="tobject"
              ng-if="SearchObjectWithTagsController.myHydratorFactory.isCustomApp(tObject.artifact.name)">
          <a ui-sref="apps.detail.overview.programs({namespace: tObject.namespaceId, appId: tObject.appId})">
            <span ng-bind="tObject.appId"></span>
          </a>
          <p class="tobject-type">
            <span class="{{tObject.icon}} pull-left"></span>
            <span> Application </span>
          </p>
        </div>

        <div class="tobject"
              ng-if="SearchObjectWithTagsController.myHydratorFactory.isETLApp(tObject.artifact.name)">
          <a ui-sref="apps.detail.overview.status({namespace: tObject.namespaceId, appId: tObject.appId})">
            <span ng-bind="tObject.appId"></span>
          </a>
          <p ng-if="SearchObjectWithTagsController.GLOBALS.etlBatch === tObject.artifact.name">
            <span class="icon-ETLBatch"></span>
            <span>ETL Batch</span>
          </p>
          <p ng-if="SearchObjectWithTagsController.GLOBALS.etlRealtime === tObject.artifact.name">
            <span class="icon-ETLRealtime"></span>
            <span>ETL Real-time</span>
          </p>
        </div>
      </div>
      <div ng-if="tObject.type === 'datasetinstance'">
        <div class="tobject">
          <a ui-sref="datasets.detail.overview.status({namespace: tObject.namespaceId, datasetId: tObject.datasetId})">
            <span ng-bind="tObject.datasetId"></span>
          </a>
          <p class="tobject-type">
            <span class="{{tObject.icon}} pull-left"></span>
            <span> Dataset </span>
          </p>
        </div>
      </div>
      <div ng-if="tObject.type === 'stream'">
        <div class="tobject">
          <a ui-sref="streams.detail.overview.status({namespace: tObject.namespaceId, streamId: tObject.streamId})">
            <span ng-bind="tObject.streamId"></span>
          </a>
          <p class="tobject-type">
            <span class="{{tObject.icon}} pull-left"></span>
            <span> Stream </span>
          </p>
        </div>
      </div>
      <div ng-if="tObject.type === 'program'">
        <div ng-if="tObject.programType === 'Workflow'">
          <div class="tobject">
            <a ui-sref="workflows.detail({namespace: tObject.namespaceId, appId: tObject.appId, programId: tObject.programId})">
              <span ng-bind="tObject.programId"></span>
            </a>
            <p class="tobject-type">
              <span class="{{tObject.icon}} pull-left"></span>
              <span> Workflow </span>
            </p>
          </div>
        </div>
        <div ng-if="tObject.programType === 'Mapreduce'">
          <div class="tobject">
            <a ui-sref="mapreduce.detail({namespace: tObject.namespaceId, appId: tObject.appId, programId: tObject.programId})">
              <span ng-bind="tObject.programId"></span>
            </a>
            <p class="tobject-type">
              <span class="{{tObject.icon}} pull-left"></span>
              <span> Mapreduce </span>
            </p>
          </div>
        </div>
        <div ng-if="tObject.programType === 'Flow'">
          <div class="tobject">
            <a ui-sref="flows.detail({namespace: tObject.namespaceId, appId: tObject.appId, programId: tObject.programId})">
            <span ng-bind="tObject.programId"></span>
            </a>
            <p class="tobject-type">
              <span class="{{tObject.icon}} pull-left"></span>
              <span> Flow </span>
            </p>
          </div>
        </div>
        <div ng-if="tObject.programType === 'Service'">
          <div class="tobject">
            <a ui-sref="services.detail({namespace: tObject.namespaceId, appId: tObject.appId, programId: tObject.programId})">
              <span ng-bind="tObject.programId"></span>
            </a>
            <p class="tobject-type">
              <span class="{{tObject.icon}} pull-left"></span>
              <span> Service </span>
            </p>
          </div>
        </div>
        <div ng-if="tObject.programType === 'Spark'">
          <div class="tobject">
            <a ui-sref="spark.detail({namespace: tObject.namespaceId, appId: tObject.appId, programId: tObject.programId})">
            <span ng-bind="tObject.programId"></span>
            </a>
            <p class="tobject-type">
              <span class="{{tObject.icon}} pull-left"></span>
              <span> Spark </span>
            </p>
          </div>
        </div>
        <div ng-if="tObject.programType === 'Worker'">
          <div class="tobject">
            <a ui-sref="worker.detail({namespace: tObject.namespaceId, appId: tObject.appId, programId: tObject.programId})">
              <span ng-bind="tObject.programId"></span>
            </a>
            <p class="tobject-type">
              <span class="{{tObject.icon}} pull-left"></span>
              <span> Worker </span>
            </p>
          </div>
        </div>

      </div>

    </div>

    <div class="well well-xs" ng-if="SearchController.filteredTObjects.length === 0">
      <h3> No CDAP objects tagged with "{{SearchObjectWithTagsController.$stateParams.tag}}"</h3>
    </div>
  </div>
</div>
